<template>
  <basic-container>
    <el-container>
      <el-aside style="width:380px;">
        <div class="i-aside">
          <avue-crud ref="crudAside"
                     :option="aside.option"
                     :data="aside.data"
                     :table-loading="aside.loading"
                     :before-open="handleAsideBeforeOpen"
                     :permission="permission"
                     @row-save="handleAsideSave"
                     @row-update="handleAsideUpdate"
                     @row-del="handleAsideDel"
                     @refresh-change="handleAsideTableData"
                     @current-row-change="handleAsideCurrentRowChange">
            <template slot-scope="scope" slot="menuBtn">
              <el-button size="small" divided @click.stop="handleAsideOpenAdd(scope.row)"
                         v-if="permission.addBtn">新增子项</el-button>
            </template>
            <template slot-scope="scope" slot="parent_idForm">
              <span>{{aside.selected && aside.selected.name ? aside.selected.name : "无"}}</span>
              <span>{{scope.row.parent_id && scope.row.parent_id >= 0 ? scope.row.parent_name : aside.selected.name}}</span>
            </template>
          </avue-crud>
        </div>
      </el-aside>
      <el-main>
        <div class="i-main">
          <avue-crud ref="crudMain"
                     :option="main.option"
                     :data="main.data"
                     :table-loading="main.loading"
                     :page="main.page"
                     :before-open="handleMainBeforeOpen"
                     :permission="permission"
                     @current-change="handleMainPageChange"
                     @refresh-change="handleMainTableData()"
                     @row-save="handleMainSave"
                     @row-update="handleMainUpdate"
                     @row-del="handleMainDel">
            <template slot="menuLeft">
              <div class="i-condition">
                <div>
                  <!--
                  <el-checkbox border size="small" @change="handleMainConditionChange"
                      v-model="main.condition.identity.itemA.checked"
                      :label="main.condition.identity.itemA.label"></el-checkbox>
                  <el-checkbox border size="small" @change="handleMainConditionChange"
                      v-model="main.condition.identity.itemB.checked"
                      :label="main.condition.identity.itemB.label"></el-checkbox>
                  -->
                </div>
              </div>
            </template>

            <template slot-scope="scope" slot="avatar">
              <img :src="scope.row.avatar" class="i-cell-avatar">
            </template>
          </avue-crud>
        </div>
      </el-main>
    </el-container>
  </basic-container>
</template>

<script>
  import {
    getTableOption as getAsideTableOption,
    getTreeData as getAsideTreeData,
    createAt as asideCreateAt,
    deleteAt as asideDeleteAt,
    updateAt as asideUpdateAt
  } from "./api"
  import {
    getTableOption as getMainTableOption,
    getTableData as getMainTableData,
    createAt as mainCreateAt,
    deleteAt as mainDeleteAt,
    updateAt as mainUpdateAt,
  } from '../../backend/user/api'

  let asideTableOption = getAsideTableOption()
  let mainTableOption = getMainTableOption()

  export default {
    name: "organization-index",
    components: {},
    data () {
      return {
        permission: {},
        options: [],
        aside: {
          option: asideTableOption,
          data:[],
          loading: false,
          selected:{},
          currentRow:{}
        },
        main: {
          option: mainTableOption,
          data:[],
          loading: false,
          page: {
            total: 0, //总页数
            currentPage: 1, //当前页数
            pageSize: 10 //每页显示多少条
          },
          condition: {
            identity: {
              itemA: {label:"考核人", value:2, checked:true},
              itemB: {label:"被考核人", value:3, checked:true}
            }
          }
        }
      }
    },
    created () {
      this.handleAsideTableData()
      this.handleMainTableData()
    },
    mounted () {
    },
    watch: {
      options() {
        let buttons = {
          viewBtn:false,
          addBtn:false,
          delBtn:false,
          editBtn:false
        }
        this.options.forEach((opt) => {
          switch (opt) {
            case 'view':
              buttons.viewBtn = true
              break
            case 'create':
              buttons.addBtn = true
              break
            case 'delete':
              buttons.delBtn = true
              break
            case 'update':
              buttons.editBtn = true
              break
          }
        })
        this.permission = buttons
      }
    },
    methods: {
      /**
       * dialog打开前的回调
       * @param done
       * @param type
       */
      handleAsideBeforeOpen(done, type) {
        if(type=='add') {
          this.$refs.crudAside.tableForm = {
            role_id: "",
            property_id: ""
          }
          if(this.aside.currentRow) {
            this.aside.selected = {
              id: this.aside.currentRow.id,
              name: this.aside.currentRow.name
            }
          }
        }
        else if(type=='edit') {
        }

        done()
      },
      handleMainBeforeOpen(done, type) {
        if(type=='add') {
          let model = {}
          if(this.aside.currentRow && this.aside.currentRow.id) {
            model.organization_id = this.aside.currentRow.id
            if(this.aside.currentRow.role_id)
              model.role_id = this.aside.currentRow.role_id
          }
          this.$refs.crudMain.tableForm = model
        }
        else if(type=='edit') {
        }

        done()
      },
      /**
       * @title 加载表数据
       */
      handleMainTableData() {
        this.main.loading = true
        let items = Object.values(this.main.condition.identity)
        const identities = items.map(item => item.checked == true ? item.value : 0).filter(x => x != 0)
        let param = {
          page_index: this.main.page.currentPage ? this.main.page.currentPage : 1,
          page_size: this.main.page.pageSize ? this.main.page.pageSize : 10,
          identity: identities.join(',')
        }
        if(this.aside.currentRow && this.aside.currentRow.id) {
          param.organization_id = this.aside.currentRow.id
        }
        getMainTableData(param).then(res => {
          this.main.data = res.data.data
          this.main.page.total = res.data.total_count
          this.main.page.pageSize = res.data.page_size
          this.main.loading = false
        })
      },
      /**
       * @title 用户列表页面改变
       */
      handleMainPageChange(index) {
        this.main.page.currentPage = index
        this.handleMainTableData()
      },
      handleMainConditionChange() {
        this.main.page.currentPage = 1
        this.handleMainTableData()
      },
      /**
       * @title 加载表数据
       */
      handleAsideTableData() {
        this.aside.loading = true
        getAsideTreeData()
            .then(res => {
              this.options = res.data.permissions
              this.aside.data = res.data.data
              this.aside.loading = false
            })
      },
      /**
       * @title 打开新增窗体
       */
      handleAsideOpenAdd(row){
        this.aside.selected = {
          id:row.id,
          name:row.name
        }
        this.$refs.crudAside.rowAdd()
      },
      /**
       * @title 当前行发生改变时触发
       * @param currentRow 当前行数据
       * @param preRow 上一个操作行数据
       *
       **/
      handleAsideCurrentRowChange(currentRow, preRow) {
        this.aside.currentRow = currentRow
        if(currentRow) {
          const param = {
            organizationId : currentRow.id
          }
          if(currentRow.parent_id === 0) {
            param.organizationId = 0
          }
          this.handleMainTableData()
        }
      },
      /**
       * @title 数据添加
       * @param row 为当前的数据
       * @param done 为表单关闭函数
       *
       **/
      handleMainSave (row, done) {
        if(this.aside.currentRow) {
          row.organization_id = this.aside.currentRow.id
          row.role_id = this.aside.currentRow.role_id
        }
        mainCreateAt(row)
            .then(() => {
              this.$message({
                showClose: true,
                message: "添加成功",
                type: "success"
              })
              this.handleMainTableData()
              done()
            })
      },
      /**
       * @title 数据添加
       * @param row 为当前的数据
       * @param done 为表单关闭函数
       *
       **/
      handleAsideSave (row, done) {
        if(this.aside.selected)
          row.parent_id = this.aside.selected.id
        asideCreateAt(row)
            .then(() => {
              this.aside.selected = {}
              this.$message({
                showClose: true,
                message: "添加成功",
                type: "success"
              })
              this.handleMainTableData()
              done()
            })
      },
      /**
       * @title 数据更新
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       * @param done 为表单关闭函数
       *
       **/
      handleMainUpdate (row, index, done) {
        mainUpdateAt(row)
            .then(() => {
              this.$message({
                showClose: true,
                message: "修改成功",
                type: "success"
              })
              this.handleMainTableData()
              done()
            })
      },
      /**
       * @title 数据更新
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       * @param done 为表单关闭函数
       *
       **/
      handleAsideUpdate (row, index, done) {
        asideUpdateAt(row)
            .then(() => {
              this.$message({
                showClose: true,
                message: "修改成功",
                type: "success"
              })
              this.handleAsideTableData()
              done()
            })
      },
      /**
       * @title 数据删除
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       *
       **/
      handleMainDel (row, index) {
        this.$confirm(`是否确认删除昵称为'${row.nick_name}'的用户`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          mainDeleteAt(row.id)
              .then(() => {
                this.$message({
                  showClose: true,
                  message: "删除成功",
                  type: "success"
                })
                this.handleMainTableData()
              })
        }).catch(() => { })
      },
      /**
       * @title 数据删除
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       *
       **/
      handleAsideDel (row) {
        this.$confirm(`是否确认删除名为'${row.name}'的节点`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          asideDeleteAt(row)
              .then(() => {
                this.$message({
                  showClose: true,
                  message: "删除成功",
                  type: "success"
                })
                this.handleAsideTableData()
              })
        }).catch(() => { })
      }
    }
  }
</script>

<style lang="scss">
  .table-container {
    padding: 8px 10px;
  }

  .avue-crud,.el-container {
    height:100%;
  }

  .i-aside,.i-main {
    height: calc(100% - 55px);
  }

  .i-cell-avatar {
    width:40px;
    height:40px;
    border-radius:20px;
    position:absolute;
    left:8px;
    top:3px;
  }

  .avue-crud__pagination {
    margin-bottom:0 !important;
  }

  .i-condition {
    display: inline-flex;
    position: relative;

    > div {
      position: relative;
      > label {
        top:1px;
        margin-right:0px;
      }
      button {
        margin:0 !important;
      }
      .el-input__inner {
        height: 36px !important;
        line-height: 36px !important;
      }
    }
  }
</style>
